<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
<title>0000: Introduction to GtkDcoding | gtkDcoding</title>
<meta name="generator" content="Jekyll v4.3.4" />
<meta property="og:title" content="0000: Introduction to GtkDcoding" />
<meta name="author" content="Ron Tarrant" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="An introduction to GTK 3 and how it can be used to create Graphical User Interfaces (GUI) for applications - a D language tutorial." />
<meta property="og:description" content="An introduction to GTK 3 and how it can be used to create Graphical User Interfaces (GUI) for applications - a D language tutorial." />
<link rel="canonical" href="http://localhost:4000/posts/0000-introduction-to-gtkDcoding.html" />
<meta property="og:url" content="http://localhost:4000/posts/0000-introduction-to-gtkDcoding.html" />
<meta property="og:site_name" content="gtkDcoding" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2019-01-11T00:00:00-05:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="0000: Introduction to GtkDcoding" />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Ron Tarrant"},"dateModified":"2019-01-11T00:00:00-05:00","datePublished":"2019-01-11T00:00:00-05:00","description":"An introduction to GTK 3 and how it can be used to create Graphical User Interfaces (GUI) for applications - a D language tutorial.","headline":"0000: Introduction to GtkDcoding","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/posts/0000-introduction-to-gtkDcoding.html"},"url":"http://localhost:4000/posts/0000-introduction-to-gtkDcoding.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="../assets/main.css">
  <link rel="stylesheet" href="../css/style.css" />
  <link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="gtkDcoding" />
</head>
<body>
<header class="site-header" role="banner">

  <div class="wrapper">
	<a class="site-title" rel="author" href="../">gtkDcoding</a><nav class="site-nav">
        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
        <label for="nav-trigger">
          <span class="menu-icon">
            <svg viewBox="0 0 18 15" width="18px" height="15px">
              <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
            </svg>
          </span>
        </label>

        <div class="trigger">
			<a class="page-link" href="../about.html">About</a>
			<a class="page-link" href="../index-reverse.html">Posts in Date Order</a>
			<a class="page-link" href="../topics.html">Blog Posts by Topic</a>
		</div>
      </nav>
	</div>
</header>
<main class="page-content" aria-label="Content">
      <div class="wrapper">
        <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
	<header class="post-header">
		<link rel="stylesheet" href="../css/font_size.css" />
		<link rel="stylesheet" href="../css/figure.css" />
		<link rel="stylesheet" href="../css/topics/window.css" />  <!-- sub in the tag/topic -->
		<link rel="stylesheet" href="../css/modal.css" />
		<link rel="stylesheet" href="../css/post.css" />
		<link rel="stylesheet" href="../css/mascot_effects.css" />

		
		
		<p class="post-meta">
		<time class="dt-published" datetime="2019-01-11T00:00:00-05:00" itemprop="datePublished">Friday, January 11, 2019
		</time>• by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">Ron Tarrant</span></span></p>
	</header>

	<div class="post-content e-content" itemprop="articleBody">
		<div class="skew-line"></div>
		<h1 id="0000-introduction-to-gtkdcoding">0000: Introduction to GtkDcoding</h1>

<p><em>Where (Exactly) All This is Coming From…</em></p>

<p>Ever since the heyday of 8-bit computers and <em>Microsoft BASIC</em> — which was available on almost every one of them — programmers  have been pursuing the goal of cross-platform development… write once, compile for m/any. These days, there’s <em>Java</em> and <em>Electron</em> if you’re so inclined, but I prefer something that compiles to a native executable using a single programming language. When I found <em>D</em>, I realized I might just have found what I was looking for.</p>

<p><em>GtkD</em> is a wrapper for <em>GTK+</em>, a GUI toolkit originally from the world of Linux, an almost-POSIX-compliant OS, but now available across a number of operating systems. That pretty much makes it perfect for my intentions. By learning how to use a single language compiler (<em>dmd2</em>) I can build and run applications on <em>Windows</em>, <em>Linux</em>, <em>Mac</em>, and <em>FreeBSD</em>. With <em>GTK+</em> thrown in, we’re looking at a single-code-base solution to cross-platform development.</p>

<p>I’ve been writing code in more than a dozen languages since 1985 and I’ve also worked with <em>GTK+</em> in some of those languages, but I’m coming into this as a <em>D</em> rookie. This blog is my exploration of <em>D</em> and <em>GtkD</em> as I work out how to code various widgets and build a thorough understanding of it all.</p>

<h2 id="why-d">Why D?</h2>

<p>The third language I learned back in the day was <em>C</em> and I fell in love with its power and elegance. Along the way, I also grew fond of curly braces—although I can’t say why. <em>D</em>, being a descendant of <em>C</em>, drives right up my street and since <em>D</em> incorporates a handful of paradigms, it’s even more appealing:</p>

<ul>
  <li>imperative,</li>
  <li>OOP,</li>
  <li>meta-programming,</li>
  <li>functional,</li>
  <li>parallel, and</li>
  <li>concurrent, but…</li>
</ul>

<p>I’m a sucker for object-oriented program development, so I’ll be concentrating on that for the most part. I’ll start with a few imperative examples, but then it’ll be OOP all the way.</p>

<h2 id="why-oop">Why OOP?</h2>

<p><em>D</em> and <em>GtkD</em> both lend themselves well to an object-oriented approach to coding. The imperative examples will get you heading in that direction if it’s where you want to go, but I much prefer a full-on OOP approach.</p>

<h2 id="blog-conventions">Blog Conventions</h2>

<p><strong>Widgets:</strong> For the sake of clarity, each example will demonstrate just one widget unless it’s something that needs extra widgets to work.</p>

<p><strong>Format:</strong></p>

<p>All code is formatted in this way:</p>

<ul>
  <li>import statements are at the top of the file,</li>
  <li>all curly braces, opening and closing, have their own line,
    <ul>
      <li>except where delegates are defined,</li>
    </ul>
  </li>
  <li>lots of white space to make things easy to read,</li>
  <li>variables are declared at the tops of functions or classes, and</li>
  <li>comments point out code not covered in previous examples.</li>
</ul>

<h2 id="what-youll-need">What You’ll Need</h2>

<p>First, a <em>D</em> compiler. I’m using <em>dmd</em>, the official reference compiler, throughout. You can find it on the <a href="https://dlang.org/download.html">Downloads page of the dlang.org web site</a>.</p>

<p>Second, you’ll want the latest <em>GTK+</em> runtime. This as well as the <a href="https://gtkd.org/Downloads/sources/GtkD-3.9.0.zip">GtkD.zip</a> file can be downloaded from <a href="https://gtkd.org/download.html">the official GtkD website (maintained by Mike Wey)</a>.</p>

<p><strong>Important:</strong> Don’t forget to reboot after installing the Gtk+ runtime. (I did this and spent half an hour trying to figure out why my examples wouldn’t run. Talk about embarrassed!)</p>

<p>For now, I’m working on <em>Windows</em> and that’ll be reflected herein as well, although I’ve done a bit of preliminary work with <em>FreeBSD</em>, so I suspect all these examples will compile without trouble on any OS where <em>D</em>, <em>GtkD</em>, and a <em>GTK+</em> runtime are available. Once I’m reoriented to the POSIX world, I’ll make sure everything works there, too. If you find any situation where you can’t compile and run these examples, please let me know.</p>

<h3 id="installation-of-the-development-environment">Installation of the Development Environment</h3>

<p>Install the reference compiler and the <em>GTK+</em> runtime. Best to accept the default locations:</p>

<ul>
  <li>The <em>GTK+</em> runtime will install in <code class="language-plaintext highlighter-rouge">C:\Program Files\gtk-runtime</code>, and</li>
  <li>The <em>D</em> compiler will install in <code class="language-plaintext highlighter-rouge">C:\D</code> although most of the action will be in <code class="language-plaintext highlighter-rouge">C:\D\dmd2</code>.</li>
</ul>

<p>So go ahead and get those installed and I’ll wait here…</p>

<h3 id="local-configuration">Local Configuration</h3>

<p>There are two more things we need to do before we can get down to it. Open the directory (folder, in Windows speak) where the <code class="language-plaintext highlighter-rouge">dmd</code> binary lives. If you accepted the defaults, it’ll be in:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>C:\D\dmd2\windows\bin\
</code></pre></div></div>

<p>Find the file:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>sc.ini
</code></pre></div></div>

<p>and open it in a text editor.</p>

<p>Look for the <code class="language-plaintext highlighter-rouge">[Environment]</code> section’s <code class="language-plaintext highlighter-rouge">DFLAGS</code> variable and:</p>

<ul>
  <li>type a space at the end of the line,</li>
  <li>copy and paste (or type) this after the space, including the quotes:</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>"-I%@P%\..\..\src\gtkd"
</code></pre></div></div>

<p>Now you need to copy the <em>GtkD</em> wrapper files to where the compiler can find them:</p>

<ul>
  <li>unzip <a href="https://gtkd.org/Downloads/sources/GtkD-3.9.0.zip">GtkD-3.9.zip</a> (the version numbers may differ by the time you read this, but that’s fine),</li>
  <li>from the <code class="language-plaintext highlighter-rouge">gtkd-3.9\generated</code> directory, copy the contents of the <code class="language-plaintext highlighter-rouge">gtkd</code> directory (but NOT the directory itself!) to:</li>
</ul>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>C:\D\dmd2\src\druntime\import\
</code></pre></div></div>

<p>Thirdly, you’ll build and install the <em>GtkD</em> library…</p>

<p>Open a command prompt and make your way to where you unzipped <code class="language-plaintext highlighter-rouge">GtkD-3.9</code> (you’re in the right place if typing <code class="language-plaintext highlighter-rouge">dir</code> shows you a file named <code class="language-plaintext highlighter-rouge">Build.d</code>), and build the library with the command:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rdmd –m64 Build.d
</code></pre></div></div>

<p>unless you’re on a 32-bit OS, then use:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>rdmd Build.d
</code></pre></div></div>

<p>without the 64-bit flag,</p>

<p>Two .lib files will appear right there in the top level directory. Copy them to:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>C:\D\dmd2\windows\lib64\
</code></pre></div></div>

<p>for a 32-bit OS, it’ll be:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>C:\D\dmd2\windows\lib\
</code></pre></div></div>

<h3 id="troubleshooting-buildd">Troubleshooting Build.d</h3>

<p>If you get a message saying that <code class="language-plaintext highlighter-rouge">msvcr100.dll</code> cannot be found, you’ll have to do a little extra. This usually happens when, during the installation of <em>DMD</em>, you opt for <em>Visual Studio</em> support, but you don’t actually install (or already have installed) <em>Visual Studio</em>.</p>

<p>Anyway, if this error appears, go to the <a href="https://www.microsoft.com/en-us/download/confirmation.aspx?id=14632">Visual Studio Redistribute Package download page</a>, download the appropriate version, and install it. Then you should be good to go.</p>

<p>And that should be that. You should be ready to dance the D-dance.</p>

<h2 id="base-test-rig">Base Test Rig</h2>

<div class="screenshot-frame">
	<div class="frame-header">
		Results of this example:
	</div>
	<div class="frame-screenshot">
		<figure>
			<img id="img0" src="../images/screenshots/001_window/window_01.png" alt="Current example output" />	<!-- img# -->
			
			<!-- Modal for screenshot -->
			<div id="modal0" class="modal">																								<!-- modal# -->
				<span class="close0">&times;</span>																					<!-- close# -->
				<img class="modal-content" id="img00" />																					<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal0");																			// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img0");																				// img#
			var modalImg = document.getElementById("img00");																		// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close0")[0];															// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>
			<figcaption>
			Current example output
			</figcaption>
		</figure>
	</div>

	<div class="frame-terminal">
		<figure class="right">
			<img id="img1" src="../images/screenshots/001_window/window_01_term.png" alt="Current example terminal output" /> <!-- img#, filename -->

			<!-- Modal for terminal shot -->
			<div id="modal1" class="modal">																												<!-- modal# -->
				<span class="close1">&times;</span>																										<!-- close# -->
				<img class="modal-content" id="img11" />																									<!-- img## -->
				<div id="caption"></div>
			</div>
			
			<script>
			// Get the modal
			var modal = document.getElementById("modal1");																							// modal#
			
			// Get the image and insert it inside the modal - use its "alt" text as a caption
			var img = document.getElementById("img1");																								// img#
			var modalImg = document.getElementById("img11");																						// img##
			var captionText = document.getElementById("caption");

			img.onclick = function()
			{
			  modal.style.display = "block";
			  modalImg.src = this.src;
			  captionText.innerHTML = this.alt;
			}
			
			// Get the <span> element that closes the modal
			var span = document.getElementsByClassName("close1")[0];																				// close#
			
			// When the user clicks on <span> (x), close the modal
			span.onclick = function()
			{ 
				modal.style.display = "none";
			}
			</script>

			<figcaption>
				Current example terminal output (click for enlarged view)
			</figcaption>
		</figure>
	</div>

	<div class="frame-footer">																																<!-- filename (below)-->
		The code file for this example is available <a href="https://github.com/rontarrant/gtkd_demos/blob/master/001_window/window_01_base.d" target="_blank">here</a>.
	</div>
</div>

<p>For now, you can copy this code (I highly suggest you type it out unless you’ve got an eidetic memory) and look for the compile instructions below:</p>

<div class="language-d highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="n">std</span><span class="p">.</span><span class="n">stdio</span><span class="p">;</span>

<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">MainWindow</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Main</span><span class="p">;</span>
<span class="k">import</span> <span class="n">gtk</span><span class="p">.</span><span class="n">Widget</span><span class="p">;</span>

<span class="kt">void</span> <span class="n">main</span><span class="p">(</span><span class="nb">string</span><span class="p">[]</span> <span class="n">args</span><span class="p">)</span>
<span class="p">{</span>
	<span class="n">Main</span><span class="p">.</span><span class="n">init</span><span class="p">(</span><span class="n">args</span><span class="p">);</span>
	<span class="n">MainWindow</span> <span class="n">testRigWindow</span> <span class="p">=</span> <span class="k">new</span> <span class="n">MainWindow</span><span class="p">(</span><span class="s">"Test Rig"</span><span class="p">);</span>
	<span class="n">testRigWindow</span><span class="p">.</span><span class="n">addOnDestroy</span><span class="p">(</span><span class="k">delegate</span> <span class="kt">void</span><span class="p">(</span><span class="n">Widget</span> <span class="n">w</span><span class="p">)</span> <span class="p">{</span> <span class="n">quitApp</span><span class="p">();</span> <span class="p">}</span> <span class="p">);</span>
	
	<span class="n">writeln</span><span class="p">(</span><span class="s">"Hello GtkD Imperative"</span><span class="p">);</span>

	<span class="c1">// Show the window and its contents...</span>
	<span class="n">testRigWindow</span><span class="p">.</span><span class="n">showAll</span><span class="p">();</span>
		
	<span class="c1">// give control over to the gtkD .</span>
	<span class="n">Main</span><span class="p">.</span><span class="n">run</span><span class="p">();</span>
	
<span class="p">}</span> <span class="c1">// main()</span>


<span class="kt">void</span> <span class="n">quitApp</span><span class="p">()</span>
<span class="p">{</span>
	<span class="c1">// This exists in case we want to do anything</span>
	<span class="c1">// before exiting such as warn the user to</span>
	<span class="c1">// save work.</span>
	<span class="n">writeln</span><span class="p">(</span><span class="s">"Bye."</span><span class="p">);</span>
	<span class="n">Main</span><span class="p">.</span><span class="n">quit</span><span class="p">();</span>
	
<span class="p">}</span> <span class="c1">// quitApp()</span>
</code></pre></div></div>

<p>Save this as <code class="language-plaintext highlighter-rouge">test_rig_imperative.d</code> (or whatever you want, really) and compile it thusly:</p>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>dmd –de –w –m64 –Lgtkd.lib test_rig_imperative.d
</code></pre></div></div>

<p>After correcting typos so the compiler finishes, type the name without an extension (or you can include the .exe extension if you’re on Windows) to run it. If you’re on Linux or any other POSIX-compliant OS, don’t forget to prepend <code class="language-plaintext highlighter-rouge">./</code> to the file name (<code class="language-plaintext highlighter-rouge">./test_rig_imperative</code>) or type out the full path.</p>

<p>And that’s it for now. Next time, we’ll break down the test rig code so you know what’s going on in there. Then I’ll show you the same functionality in an OOP version of the test rig.</p>

<p>Until then, happy D-coding and may the widgets be with you.</p>

<div class="blog-nav">
	<div style="float: right;">
		<a href="./0001-imperative-test-rig.html">Next: Introduction to the Test Rig</a>
	</div>
</div>
<p>
	<h3></h3>
<div class="inpage-frame">
	<a href="https://github.com/sponsors/rontarrant">
		<BR>
		<BR>
		<B>Is this article useful? Educational? Entertaining, perhaps?</B>
		<BR>
		<figure class="left">
			<img src="../images/favorite_32.png" alt="Sponsorship heart" style="width: 32px; height: 32px;">
		</figure>
		You're free to accept or decline this invitation to become our newest sponsor.
	</a>
</div>
	<h4 class="comment-blurb"><B>Comments? Questions? Observations?</B></h4>
	<p>
		Did we miss a tidbit of information that would make this post even more informative? Let's talk about it in the comments.
	</p>
	<script src="https://utteranc.es/client.js"
		repo="rontarrant"
		issue-term="pathname"
		theme="github-light"
		crossorigin="anonymous"
		async>
	</script>
	<ul>
		<li> come on over to the <a href="https://forum.dlang.org/">D Language Forum</a> and look for one of the <i>gtkDcoding</i> announcement posts, </li>
		<li> drop by <a href="https://forum.gtkd.org/">the <i>GtkD Forum</i></a>,</li>
		<li> follow the link below to email me, or</li>
		<li> go to the	<a href="https://www.facebook.com">gtkDcoding Facebook page.</a></li>
	</ul>
</p>
<p> You can also subscribe <a href="/feed.xml">via RSS</a> so you won't miss anything. Thank you very much for dropping by.</p>
<p>&copy; Copyright 2025 Ron Tarrant </p>
</div>

	<a class="u-url" href="./0000-introduction-to-gtkDcoding.html" hidden></a>
</article>

      </div>
    </main><footer class="site-footer h-card">
  <data class="u-url" href="/"></data>

  <div class="wrapper">

    <h2 class="footer-heading">gtkDcoding</h2>

    <div class="footer-col-wrapper">
      <div class="footer-col footer-col-1">
        <ul class="contact-list">
          <li class="p-name">Ron Tarrant</li><li><a class="u-email" href="mailto:gtkDcoding@gmail.com">gtkDcoding@gmail.com</a></li></ul>
      </div>

      <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/rontarrant"><svg class="svg-icon"><use xlink:href="../assets/minima-social-icons.svg#github"></use></svg> <span class="username">rontarrant</span></a></li></ul>
</div>

      <div class="footer-col footer-col-3">
        <p>Simple examples of how to use GtkD to build GUI applications.</p>
      </div>
    </div>

  </div>

</footer>
</body>

</html>
